<template>
  <!-- 数据管理 -->
  <div class="data-manage">
    <div class="data-manage-bottom padding15">
      <div class="data-manage-buttons">
        <span style="margin-right: 15px">
          数据总数:{{ tableData.length }}
        </span>

        <el-input
          style="width: 300px; margin-left: 15px"
          placeholder="请输入受灾地点关键词"
          v-model="searchStr"
          size="small"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchClick"
          ></el-button>
        </el-input>

        <el-input
          style="width: 300px; margin-left: 15px"
          placeholder="请输入想查询的时间范围"
          v-model="searchStr2"
          size="small"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchClick2"
          ></el-button>
        </el-input>
        <br />
        <br />
        <!-- 详情及表格 -->
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="changeDataType"
        >
          <el-tab-pane label="山体滑坡" name="first">
            <el-table
              border
              stripe
              :data="tableData"
              style="width: 100%"
              height="480"
            >
              <el-table-column
                type="expand"
                label="展开"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <p style="margin-left: 15px">
                    现场情况：{{ scope.row.brief }}
                  </p>
                  <p style="margin-left: 15px">
                    信息来源：{{ scope.row.from }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="灾害类型" width="100">
              </el-table-column>
              <el-table-column prop="because" label="灾害原因" width="100">
              </el-table-column>
              <el-table-column prop="address" label="受灾地点" width="180">
              </el-table-column>

              <el-table-column
                prop="time"
                width="150"
                align="center"
                label="受灾日期"
              >
              </el-table-column>
              <el-table-column
                prop="city1"
                width="70"
                align="center"
                label="省"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="市"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="县"
              >
              </el-table-column>

              <el-table-column prop="money" label="经济损失"> </el-table-column>
              <el-table-column prop="people" label="人员伤亡">
              </el-table-column>
              <el-table-column prop="home" label="被毁房屋"> </el-table-column>
              <el-table-column prop="num" label="体量（立方）">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="泥石流" name="two">
            <el-table
              border
              stripe
              :data="tableData"
              style="width: 100%"
              height="480"
            >
              <el-table-column
                type="expand"
                label="展开"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <p style="margin-left: 15px">
                    现场情况：{{ scope.row.brief }}
                  </p>
                  <p style="margin-left: 15px">
                    信息来源：{{ scope.row.from }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="灾害类型" width="100">
              </el-table-column>
              <el-table-column prop="because" label="灾害原因" width="100">
              </el-table-column>
              <el-table-column prop="address" label="受灾地点" width="180">
              </el-table-column>

              <el-table-column
                prop="time"
                width="150"
                align="center"
                label="受灾日期"
              >
              </el-table-column>
              <el-table-column
                prop="city1"
                width="70"
                align="center"
                label="省"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="市"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="县"
              >
              </el-table-column>

              <el-table-column prop="money" label="经济损失"> </el-table-column>
              <el-table-column prop="people" label="人员伤亡">
              </el-table-column>
              <el-table-column prop="home" label="被毁房屋"> </el-table-column>
              <el-table-column prop="num" label="体量（立方）">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="崩塌" name="three">
            <el-table
              border
              stripe
              :data="tableData"
              style="width: 100%"
              height="480"
            >
              <el-table-column
                type="expand"
                label="展开"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <p style="margin-left: 15px">
                    现场情况：{{ scope.row.brief }}
                  </p>
                  <p style="margin-left: 15px">
                    信息来源：{{ scope.row.from }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="灾害类型" width="100">
              </el-table-column>
              <el-table-column prop="because" label="灾害原因" width="100">
              </el-table-column>
              <el-table-column prop="address" label="受灾地点" width="180">
              </el-table-column>

              <el-table-column
                prop="time"
                width="150"
                align="center"
                label="受灾日期"
              >
              </el-table-column>
              <el-table-column
                prop="city1"
                width="70"
                align="center"
                label="省"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="市"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="县"
              >
              </el-table-column>

              <el-table-column prop="money" label="经济损失"> </el-table-column>
              <el-table-column prop="people" label="人员伤亡">
              </el-table-column>
              <el-table-column prop="home" label="被毁房屋"> </el-table-column>
              <el-table-column prop="num" label="体量（立方）">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="地面塌陷" name="four">
            <el-table
              border
              stripe
              :data="tableData"
              style="width: 100%"
              height="480"
            >
              <el-table-column
                type="expand"
                label="展开"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <p style="margin-left: 15px">
                    现场情况：{{ scope.row.brief }}
                  </p>
                  <p style="margin-left: 15px">
                    信息来源：{{ scope.row.from }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="灾害类型" width="100">
              </el-table-column>
              <el-table-column prop="because" label="灾害原因" width="100">
              </el-table-column>
              <el-table-column prop="address" label="受灾地点" width="180">
              </el-table-column>

              <el-table-column
                prop="time"
                width="150"
                align="center"
                label="受灾日期"
              >
              </el-table-column>
              <el-table-column
                prop="city1"
                width="70"
                align="center"
                label="省"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="市"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="县"
              >
              </el-table-column>

              <el-table-column prop="money" label="经济损失"> </el-table-column>
              <el-table-column prop="people" label="人员伤亡">
              </el-table-column>
              <el-table-column prop="home" label="被毁房屋"> </el-table-column>
              <el-table-column prop="num" label="面积（平方米）">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="地面沉降" name="five">
            <el-table
              border
              stripe
              :data="tableData"
              style="width: 100%"
              height="480"
            >
              <el-table-column
                type="expand"
                label="展开"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <p style="margin-left: 15px">
                    现场情况：{{ scope.row.brief }}
                  </p>
                  <p style="margin-left: 15px">
                    信息来源：{{ scope.row.from }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="灾害类型" width="100">
              </el-table-column>
              <el-table-column prop="because" label="灾害原因" width="100">
              </el-table-column>
              <el-table-column prop="address" label="受灾地点" width="180">
              </el-table-column>

              <el-table-column
                prop="time"
                width="150"
                align="center"
                label="受灾日期"
              >
              </el-table-column>
              <el-table-column
                prop="city1"
                width="70"
                align="center"
                label="省"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="市"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="县"
              >
              </el-table-column>

              <el-table-column prop="money" label="经济损失"> </el-table-column>
              <el-table-column prop="people" label="人员伤亡">
              </el-table-column>
              <el-table-column prop="home" label="被毁房屋"> </el-table-column>
              <el-table-column prop="mianji" label="面积（平方米）">
              </el-table-column>
              <el-table-column prop="num" label="下降深度（米）">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="地裂缝" name="six">
            <el-table
              border
              stripe
              :data="tableData"
              style="width: 100%"
              height="480"
            >
              <el-table-column
                type="expand"
                label="展开"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <p style="margin-left: 15px">
                    现场情况：{{ scope.row.brief }}
                  </p>
                  <p style="margin-left: 15px">
                    信息来源：{{ scope.row.from }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="type" label="灾害类型" width="100">
              </el-table-column>
              <el-table-column prop="because" label="灾害原因" width="100">
              </el-table-column>
              <el-table-column prop="address" label="受灾地点" width="180">
              </el-table-column>

              <el-table-column
                prop="time"
                width="150"
                align="center"
                label="受灾日期"
              >
              </el-table-column>
              <el-table-column
                prop="city1"
                width="70"
                align="center"
                label="省"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="市"
              >
              </el-table-column>
              <el-table-column
                prop="city2"
                width="70"
                align="center"
                label="县"
              >
              </el-table-column>

              <el-table-column prop="money" label="经济损失"> </el-table-column>
              <el-table-column prop="people" label="人员伤亡">
              </el-table-column>
              <el-table-column prop="home" label="被毁房屋"> </el-table-column>
              <el-table-column prop="num" label="裂缝长度（米）">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      activeName: "first",

      zd: "体量（立方）",
      tableData: [],

      searchStr: "",
      searchStr2: "",

      dialogVisible: false,
      dialogData: {
        name: "",
        brief: "",
      },

      dataV: [],
    };
  },
  created() {
    // 初始化数据
    this.tableData = this.ZhaiHaiData[0].dataArr;
    this.zd = this.ZhaiHaiData[0].zd;
    this.dataV = this.tableData;

    this.changeinstryType("one");
  },

  computed: {
    ...mapState(["instryType", "ZhaiHaiData"]),
  },

  methods: {
    ...mapMutations(["changeinstryType", "getCoordinate"]),

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },

    async changeDataType() {
      if (this.activeName === "first") {
        this.tableData = this.ZhaiHaiData[0].dataArr;
        this.zd = this.ZhaiHaiData[0].zd;
      } else if (this.activeName === "two") {
        this.tableData = this.ZhaiHaiData[1].dataArr;
        this.zd = this.ZhaiHaiData[1].zd;
      } else if (this.activeName === "three") {
        this.tableData = this.ZhaiHaiData[2].dataArr;
        this.zd = this.ZhaiHaiData[2].zd;
      } else if (this.activeName === "four") {
        this.tableData = this.ZhaiHaiData[3].dataArr;
        this.zd = this.ZhaiHaiData[3].zd;
      } else if (this.activeName === "five") {
        this.tableData = this.ZhaiHaiData[4].dataArr;
        this.zd = this.ZhaiHaiData[4].zd;
      } else if (this.activeName === "six") {
        this.tableData = this.ZhaiHaiData[5].dataArr;
        this.zd = this.ZhaiHaiData[5].zd;
      }
      this.dataV = this.tableData;
    },

    // 模糊查询按钮
    async searchClick() {
      this.searchStr2 = "";
      if (this.searchStr) {
        var newtableData = this.dataV.filter((ele) =>
          ele.address.includes(this.searchStr)
        );

        this.tableData = newtableData;
      } else {
        this.tableData = this.dataV;
      }
    },

    async searchClick2() {
      this.searchStr = "";
      if (this.searchStr2) {
        var newtableData = this.dataV.filter((ele) =>
          ele.time.includes(this.searchStr2)
        );

        this.tableData = newtableData;
      } else {
        this.tableData = this.dataV;
      }
    },

    async delMain(row) {
      // console.log(row, this.instryType);
      var res = "";
      if (this.instryType === "one") {
        res = await this.$axios.post(
          "/removeOneHeritageMainData/removeOneHeritageMainData",
          row
        );
      }

      if (res.status === 200) {
        this.$message({
          message: "信息删除成功",
          type: "success",
        });
      }

      // 重新获取数据
      var res1 = "";
      if (this.instryType === "one") {
        res1 = await this.$axios.get(
          "/getHeritageMainData/getHeritageMainData"
        );
      } else if (this.instryType === "two") {
        res1 = await this.$axios.get("/getHeritageMuseum/getHeritageMuseum");
      } else if (this.instryType === "three") {
        res1 = await this.$axios.get("/getHeritageTourism/getHeritageTourism");
      }

      this.tableData = res1.data.data;
    },
  },
};
</script>

<style>
</style>